<template>
  <div class="xiaobanxin">
    <div class="top">
      <input type="text" />
      <p>搜索"{{ this.$store.state.Valtxt.toString() }}",找到首单曲</p>
    </div>
    <div class="bottom">
      <el-tabs class="biaotou" type="border-card">
        <el-tab-pane label="单曲">
          <table>
            <tr v-for="(item, index) in danqu" :key="index">
              <td>{{ item.name }}</td>
              <td>
                {{ item.ar[0].name }}/
                {{ item.ar[1].name }}
              </td>
              <td>{{ item.al.name }}</td>
              <td>1</td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="歌手"></el-tab-pane>
        <el-tab-pane label="专辑"></el-tab-pane>
        <el-tab-pane label="视频"></el-tab-pane>
        <el-tab-pane label="歌词"></el-tab-pane>
        <el-tab-pane label="歌单"></el-tab-pane>
        <el-tab-pane label="声音主播"></el-tab-pane>
        <el-tab-pane label="用户"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[35, 70, 105, 140]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { GetSearchApi } from "@/request/api";
export default {
  data() {
    return {
      danqu: [],
    };
  },
  created() {
    GetSearchApi({ keywords: this.$store.state.TxtVal }).then((res) => {
      this.danqu = res.data.result.songs;
      console.log(res);
      console.log(this.$store.state.TxtVal);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
table {
  td {
    font-size: 14px;
    &:nth-of-type(1) {
      width: 450px;
    }
    &:nth-of-type(2) {
      width: 150px;
    }
    &:nth-of-type(3) {
      width: 80px;
    }
    &:nth-of-type(4) {
      width: 80px;
    }
    background-color: skyblue;
  }
}
</style>